<template lang="pug">
    span(:style='{color:actionColor(method)}' class='http-method-tag')
        | {{ shortMethod }}
</template>

<script>
    const colorsMapping = {
        'GET': '#18BE6B',
        'POST': '#FF9901',
        'PUT': '#2D8CF0',
        'DELETE': '#ED4015'
    };
    const methodMapping = {
        'DELETE': 'DEL',
        'OPTIONS': 'OPT'
    };
    export default {
        name: "MethodTag",
        computed: {
            shortMethod() {
                return methodMapping[this.$props.method] || this.$props.method;
            }
        },
        props: {
            method: {
                type: String,
                default: ''
            }
        },
        methods: {
            actionColor(method) {
                return colorsMapping[method] || '#EEEEEE';
            }
        },
    }
</script>

<style scoped>
    .http-method-tag {
        font-size: 10px;
        font-weight: bold;
        width: 50px;
        display: inline-block;
        text-align: right;
        padding-right: 5px;
    }
</style>
